<template>
  <div class="container">
    <el-card class="choice-card">
      <!-- 筛选区域 -->
      <!-- 头部 -->
      <el-row type="flex" justify="space-between" align="middle">
        <span class="pink">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" size="large"
        @click="$router.push({path: '/questions/new'})"
          >新增试题</el-button
        >
      </el-row>
      <!-- 表单 -->
      <el-form class="choice-form" :model="formData" label-width="80px" >
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" label-width="85px">
              <el-select placeholder="请选择" class="choice-select" v-model="formData.subjectID">
                <el-option
                 v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="85px">
              <el-select placeholder="请选择" class="choice-select" v-model="formData.catalogID">
                <el-option
                 v-for="item in directorys"
                 :key="item.id"
                 :label="item.directoryName"
                 :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" label-width="85px">
              <el-select placeholder="请选择" class="choice-select" v-model="formData.tags">
                <el-option
                   v-for="item in tags"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" label-width="85px">
              <el-input placeholder="请输入" v-model="formData.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" label-width="85px">
              <el-select placeholder="请选择" class="choice-select" v-model="formData.questionType">
                <el-option
                v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" label-width="85px">
              <el-select placeholder="请选择" class="choice-select" v-model="formData.difficulty">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" label-width="85px">
              <el-select placeholder="请选择" class="choice-select" v-model="formData.direction">
                <el-option
                 v-for="(item,index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="85px">
              <el-select placeholder="请选择" class="choice-select" v-model="formData.creatorID">
                <el-option
                  v-for="item in creators"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" label-width="85px">
              <el-input v-model="formData.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="85px">
              <el-input v-model="formData.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" label-width="85px">
              <el-row type="flex">
                <el-select placeholder="请选择" class="choice-select" v-model="formData.province" @change="provinceChange">
                  <el-option
                   v-for="(item,index) in provinces"
                   :key="index"
                   :label="item"
                   :value="item"
                  ></el-option>
                </el-select>
                <el-select placeholder="请选择" class="choice-select" v-model="formData.city">
                  <el-option
                    v-for="(item,index) in citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button size="small" @click="clearAll">清除</el-button>
              <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 标签页 -->
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0">
          <TabContent :tableData="choicesList" :pager="pager"
           @pagerChange="search"></TabContent>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="1">
          <TabContent :tableData="choicesList" :pager="pager"
           @pagerChange="search"></TabContent>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="2">
          <TabContent :tableData="choicesList" :pager="pager"
           @pagerChange="search"></TabContent>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="3">
          <TabContent :tableData="choicesList" :pager="pager"
           @pagerChange="search"></TabContent>
        </el-tab-pane>
      </el-tabs>
      <!-- 列表区域 -->
      <!-- 头部筛选 -->

      <!-- 列表区域 -->
    </el-card>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { choice } from '@/api/hmmm/questions'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple } from '../../api/hmmm/subjects'
import { simple as userSimple } from '@/api/base/users'
import { list as directList } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import TabContent from '../components/questions-choice/tab-content'
export default {
  components: {
    TabContent
  },
  data () {
    return {
      formData: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      subjectList: [],
      difficulty,
      questionType,
      direction,
      provinces: [],
      citys: [],
      creators: [],
      directorys: [],
      tags: [],
      choicesList: [],
      activeName: '0',
      pager: {
        page: 1,
        pagesize: 5,
        total: 10
      }
    }
  },
  async created () {
    const res = await simple()
    this.subjectList = res.data
    this.setSubjectList(this.subjectList)
    const users = await userSimple()
    this.creators = users.data
    const directorys = await directList()
    this.directorys = directorys.data.items
    this.setDirectoryList(this.direction)
    const tags = await tagsSimple()
    this.tags = tags.data
    this.provinces = provinces()
    const choiceList = await choice(this.pager)
    this.choicesList = choiceList.data.items
    this.pager.total = choiceList.data.counts
  },
  methods: {
    ...mapMutations('choice', ['setSubjectList', 'setDirectoryList']),
    provinceChange () {
      this.citys = citys(this.formData.province)
    },
    clearAll () {
      this.formData = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    },
    async search (pager) {
      this.pager.page = 1
      if (pager) this.pager = pager
      const res = await choice({ ...this.formData, ...this.pager })
      this.choicesList = res.data.items
      this.pager.total = res.data.counts
    },
    async handleClick (tab, event) {
      await this.search()
      if (tab.name === '0') return
      if (tab.name === '1') {
        this.choicesList = this.choicesList.filter(item => item.chkState + 1 === 1)
      } else if (tab.name === '2') {
        this.choicesList = this.choicesList.filter(item => item.chkState + 1 === 2)
      } else {
        this.choicesList = this.choicesList.filter(item => item.chkState + 1 === 3)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.choice-card {
  padding: 10px;
  .pink {
    color: #ffc0cb;
  }
  .choice-form {
    margin: 15px 0;
  }
  .choice-select {
    width: 100%;
  }
}
</style>
